<template>
  <div class="placeOrder">
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      :fixed="true"
      left-arrow
      @click-left="back"
    ></van-nav-bar>
    <div class="content" v-if="display">
      <div class="userAddress" @click="toMyAddress">
        <div class="region">
          <van-tag
            class="van-tag"
            round
            type="primary"
            v-if="userAddress.isDefault"
            >默认</van-tag
          >
          <p class="region-text">{{ userAddress.region }}</p>
        </div>
        <div class="detailedAddress">{{ userAddress.addressDetail }}</div>
        <div class="userInfo">
          <div class="name">{{ userAddress.name }}</div>
          <div class="telephone">{{ userAddress.tel }}</div>
        </div>
      </div>

      <div class="orderInfo">
        <div class="item" v-for="(item, index) in commodityData" :key="index">
          <div class="item-left">
            <img :src="item.small_img" alt="" />
          </div>
          <div class="item-right">
            <div class="item-right-t">
              <p class="name">{{ item.name }}</p>
              <p class="enname">{{ item.rule }}</p>
            </div>
            <div class="item-right-b">
              <span class="price">&yen;{{ item.price }}</span>
              <div class="item-right-b-r">
                <p class="quantity">X{{ item.count }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-submit-bar
      v-if="display"
      :price="total"
      text-align="left"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
export default {
  name: "PlaceOrder",
  data() {
    return {
      display: true,
      list: [],
      userAddress: {
        tel: "",
        name: "",
        isDefault: false,
        region: "",
        addressDetail: "",
      },
      sids: [],
      commodityData: [],
      total: 0,
    };
  },
  created() {
    this.sids = this.$route.query.sids.split("-");
    this.getUserAddress();
    this.getcommodityData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getUserAddress() {
      this.axios({
        method: "get",
        url: "/findAddress",
      }).then((result) => {

        if (result.data.code == 20000) {
          if (result.data.result.length == 0) {
            this.display = false;
            this.$dialog
              .confirm({
                message: "你还没有收货地址哦，赶快去添加一个吧",
              })
              .then(() => {
                return this.$router.push({name:"NewAddress"});
              })
              .catch(() => {
                this.$router.go(-1);
              });
          } else {
            let aid = localStorage.getItem("aid");
            result.data.result.forEach((item,index) => {
              item.region = `${item.province}${item.city}${item.county}`;
              if (aid == null) {
                if (item.isDefault) {
                  for (let key in this.userAddress) {
                    this.userAddress[key] = item[key];
                  }
                } else if (!item.isDefault) {
                  if (index == 0) {
                    for (let key in this.userAddress) {
                      this.userAddress[key] = item[key];
                    }
                  }
                }
              }else if (item.aid == aid) {
                for (let key in this.userAddress) {
                  this.userAddress[key] = item[key];
                }
              }
            });

          }
        }
      });
    },
    getcommodityData() {
      this.axios({
        method: "get",
        url: "/commitShopcart",
        params: {
          sids: JSON.stringify(this.sids),
        },
      }).then((result) => {

        let total = 0;
        result.data.result.forEach((item) => {
          total += item.count * item.price;
        });
        this.commodityData = result.data.result;
        this.total = total * 100;

      });
    },
    toMyAddress() {
      this.$router.push({name:"MyAddress"});
    },
    onSubmit() {
      let address = `${this.userAddress.region}${this.userAddress.addressDetail}`;
      this.axios({
        method: "post",
        url: "/pay",
        data: {
          sids: JSON.stringify(this.sids),
          phone: this.userAddress.tel,
          address: address,
          receiver: this.userAddress.name,
        },
      }).then((result) => {

        if (result.data.code == 60000) {
          this.$router.push({name:"Order"});
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.placeOrder {
 padding-top: 76px;
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  /deep/.van-icon{
    color: #fff;
  }
  /deep/.van-nav-bar__text{
    color: #fff;
  }
  .content {
    padding: 10px 10px 60px 10px;
    .userAddress {
      padding: 10px;
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      .region {
        display: flex;
        align-items: center;
        .van-tag {
          margin-right: 10px;
        }
        .region-text {
          color: #666;
          font-size: 13px;
        }
      }
      .detailedAddress {
        font-size: 16px;
        font-weight: 600;
        margin: 5px 0;
      }
      .userInfo {
        display: flex;
        align-items: center;
        color: #666;
        .telephone {
          font-size: 12px;
          margin-left: 10px;
        }
      }
    }
    .orderInfo {
      margin-top: 20px;
      background-color: #fff;
      border-radius: 10px;
      padding: 0 5px;
      .item {
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
        display: flex;
        padding: 10px;
        .item-left {
          margin-right: 10px;
          img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
        }
        .item-right {
          width: calc(100% - 90px);
          .item-right-t {
            margin-bottom: 25px;
            p {
              width: 160px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .name {
              font-size: 15px;
              color: #555;
            }
            .enname {
              color: #999;
            }
          }
          .item-right-b {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .price {
              font-size: 16px;
              font-weight: 600;
              color: #0022ab;
            }
            .item-right-b-r {
              .quantity {
                font-size: 14px;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
</style>